<?php
?>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.29/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .controlPanel{
        padding: 0;
      margin: 0;
      height: 10%;
      width: 100%; 
    }

  </style>
  <style>
    .my-btn-div{
        position: absolute;
        bottom: 20px;
        left: calc(50% - 100px);
        width:200px;
        height:30px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .btn-cancel {
        width:50px;
        height: 25px;
        background-color: cadetblue;
        font-size: 16px;
        color:white;
        margin-right:30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
        border-radius: 5px;
    }
    .btn-close {
        width:50px;
        height: 25px;
        background-color: rgb(28, 40, 126);
        font-size: 16px;
        color:white;
        margin-left: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
        border-radius: 5px;
    }

</style>

  <script>
    require([
        "esri/Map",       
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/Editor"       
      ], (
        Map,
        MapView,
        FeatureLayer,
        Editor
      ) => {

        // Create a map from the referenced webmap item id
        const map = new Map({
            basemap: "streets-navigation-vector"
            //basemap: "osm"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center:[115,35],
          zoom:4,
        });

        view.when(() => {

          let featureLayer = new FeatureLayer({
                // portalItem: {
                //   id: "3807c58dd48c4d32810042d8edf4a2fe"
                // },
                url:'https://gis24.jlu3s.com/server/rest/services/Hosted/cctourism_point/FeatureServer/0',
                outFields: ["*"],
                title: "sights"
          });
          map.add(featureLayer); 

          let featureLayer2 = new FeatureLayer({
                // portalItem: {
                //   id: "3807c58dd48c4d32810042d8edf4a2fe"
                // },
                url:'https://gis24.jlu3s.com/server/rest/services/Hosted/cctourism_point/FeatureServer/1',
                outFields: ["*"],
                title: "sight_polygon舞台交给你~"
          });
          //map.add(featureLayer2); 

          const editor = new Editor({
            view: view
          });

          // Add the widget to the view
          view.ui.add(editor, "top-right");
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="myBtnDiv" class="my-btn-div">
    <div class="btn-cancel" onclick="returnTosightList()">返回</div>
    <div id="btnClose" class="btn-close">关闭</div>
  </div>

  <script>
    //第一个按钮的点击方法
    function returnTosightList(){
        window.location="sightList.php";
    } 

    //第二个按钮的监听事件，同时调用第一个按钮的跳转返回页面的方法
    document.getElementById("btnClose").addEventListener("click",()=>{        
        returnTosightList();
    });
  </script>
</body>

</html>